<template>
  <header class="tab-header">
    <div class="tab-back">
      <van-icon name="arrow-left" v-if="backFlag" @click="onBack" />
    </div>
    <div class="tab-title">{{ title }}</div>
    <div class="tab-menu" v-if="menuFlag">
      <van-popover
        v-model:show="showPopover"
        theme="dark"
        :actions="actions"
        :offset="[-20, 3]"
        @select="onTabSelect"
      >
        <template #reference>
          <van-icon name="wap-nav" v-if="menuFlag" />
        </template>
      </van-popover>
    </div>
    <span class="tab-menu" v-if="!menuFlag" style="font-size: 0.15rem"
      >编辑</span
    >
  </header>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const route = useRoute();
    console.log(route);
    const router = useRouter();
    const state: {
      backFlag: boolean;
      menuFlag: boolean;
      title: string | unknown;
      showPopover: boolean;
      actions: {
        text: string;
        path: string;
      }[];
    } = reactive({
      backFlag: false,
      menuFlag: true,
      title: "首页",
      showPopover: false,
      actions: [
        { text: "首页", path: "/home" },
        { text: "我的", path: "/mine" },
        { text: "分类", path: "/ceat" },
        { text: "视频", path: "/video" },
        { text: "收藏", path: "/show" },
      ],
    });

    const onBack = () => {
      router.back();
    };

    const checkBack = () => {
      const currentPath = route.path;
      if (currentPath.indexOf("/home") !== -1) {
        state.backFlag = false;
      } else {
        state.backFlag = true;
      }
      if (currentPath.indexOf("/show") !== -1) {
        state.menuFlag = false;
      } else {
        state.menuFlag = true;
      }
    };

    watch(route, () => {
      checkBack();
      console.log("rot", route);
      if (route.meta.title) {
        state.title = route?.meta?.title;
      } else {
        // 针对列表
        state.title = route?.query?.title;
      }
    });

    const onTabSelect = (action: { text: string; path: string }) => {
      router.push(action.path);
    };

    onMounted(() => {
      checkBack();
      if (route.meta.title) {
        state.title = route?.meta?.title;
      } else {
        // 针对列表
        state.title = route?.query?.title;
      }
    });

    return {
      ...toRefs(state),
      onBack,
      onTabSelect,
    };
  },
});
</script>

<style lang="stylus" scoped>

.tab-header
    width 100%
    height .515rem
    background #e54847
    display flex
    align-items center
    color white
    .tab-title
        font-size .18rem
        flex 1
        text-align center
    .tab-back
        width .5rem
        height .5rem
        display flex
        justify-content center
        align-items center
    .tab-menu
        width .5rem
        height .5rem
        display flex
        justify-content center
        align-items center
        /deep/ .van-popover__wrapper
          display flex


    .van-icon
        font-size .3rem
</style>
